<!-- 表格 -->
<template>
    <div>
        <!-- 内容 -->
        <el-table :data="tableData" style="width: 100%">

            <el-table-column v-for="item in columns" :key="item.prop" :prop="item.prop" :label="item.label"
                :width="item.width">

                <template slot-scope="{ row, column }">
                    <!-- 可编辑的输入框 -->
                    <el-input class="tck" v-if="editableCell === `${row.id}-${column.property}`"
                        v-model="row[column.property]" @blur="handleBlur(row, column)" />
                    <!-- 显示文本 -->
                    <span v-else @click="handleCellClick(row, column)">
                        {{ row[column.property] }}
                    </span>
                </template>
            </el-table-column>


        </el-table>
    </div>
</template>

<script>
    export default {
        // 获取传过来的值
        props: ['tableData'],
        data() {
            return {
                selectedFile: null,
                editableCell: null, // 当前可编辑的单元格
                columns: [
                    { prop: "tcrq", label: "提出日期", width: "180" },
                    { prop: "zt", label: "处理状态", width: "180" },
                    { prop: "wtms", label: "问题描述", width: "180" },
                    { prop: "dtzyyc", label: "等待中已隐藏", width: "180" },
                    { prop: "wtlx", label: "问题类型", width: "180" },
                    { prop: "mk", label: "模块", width: "180" },
                    { prop: "tcr", label: "提出人", width: "180" },
                    { prop: "clqkbz", label: "处理情况备注", width: "180" }
                ]
            };
        },
        methods: {
            // 点击单元格时，设置为可编辑状态
            handleCellClick(row, column) {
                this.editableCell = `${row.id}-${column.property}`;
            },
            // 失去焦点时，保存数据并退出编辑状态
            handleBlur(row, column) {
                this.editableCell = null;
                this.saveData(row); // 触发保存方法
            },
            
            // 保存数据的方法
            saveData(row) {
                console.log("保存的数据：", row);
                // 在这里调用 API 或触发父组件的方法来保存数据
                this.$emit('save', row); // 触发父组件的 save 事件
            }
        }
    };

</script>

<style scoped>
    /* 加边框 */
    .jbk {
        border: 1px solid salmon;
    }

    /* 居中 */
    .jz {
        /* 水平居中*/
        align-items: center;
        /* 垂直居中*/
        justify-content: center;

    }

    /* 外边距 */
    .wbj {
        margin: auto;
    }

    .tck {
        width: 100px;
    }
</style>